// // 判断用户是否登录
// var username = getCookie('username')
// if(!username){
//     layer.msg('请先登录', {
//         icon: 2,
//         time: 1000
//     }, function(){
//         // 强行跳转到登录页
//         location.href = 'login.html?callback='+location.href
//     })
// }
// 如果登录成功
// 发送请求获取购物车数据
$.ajax({
    url: 'http://localhost:8888/cart/list',
    data: {
        id: getCookie('userId')
    },
    headers: {
        authorization: localStorage.getItem('token') || ''
    }
}).then(res => {
    console.log(res);
    if(res.code === 1){
        if(!res.cart.length){
            showEmpty()
            return false
        }
        var html = ''
        res.cart.forEach((item, index) => {
            html += `
                <div class="car_body_list">
                    <div class="car_body">
                        <div class="car_body_row1">
                            <div>

                            </div>
                            <div>
                                <a href="javaScript:;">京东自营店</a>
                                <b><a></a></b>
                            </div>
                            <div>
                                <b></b>
                            </div>
                        </div>
                        <div class="car_body_row2">
                            <div>
                                <span class="mj">满减</span>
                                <span>已满5件，已减0.00元</span>
                                <a href="list.html">去凑单></a>
                            </div>
                            <div>
                                <p>¥<span>50</span></p>
                                <p class="jian">减：-¥<span>0.00</span></p>
                            </div>
                        </div>
                        <div class="car_body_row3">
                            <div class="car_body_checkbox" data-id="${item.goods_id}">
                                <input type="checkbox" class="checkOne" ${item.is_select ? 'checked' : ''}>
                            </div>
                            <div class="car_body_img">
                                <img src="${item.img_small_logo}" alt="">
                            </div>  
                            <div class="car_body_goods">                          
                                <b></b>
                                <p><a>${item.title}</a></p>                          
                            </div> 
                            <div class="car_body_style"></div>                       
                            <div class="car_body_price">¥<span>${item.price}</span>元</div>
                            <div class="car_body_num" data-stock="${item.goods_number}" data-id="${item.goods_id}">
                                <input type="button" value="-" class="reduce">
                                <input type="number" value="${item.cart_number}" class="goodsNumber">
                                <input type="button" value="+" class="add">
                                <p>有货</p>
                            </div>
                            <div class="car_body_sum">¥<span>${item.price * item.cart_number}</span>
                            </div>
                            <div class="car_body_operate">
                                <p>
                                    <a href="javaScript:;" class="del" data-id="${item.goods_id}">删除</a>
                                    <a href=""></a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            `
        })
        $('.cartcontent').html(html)
        // 是否所有单选都是选中的
        var bool = res.cart.every(item => item.is_select)
        $('.checkAll').prop('checked', bool)
        // ajax数据渲染以后再做功能
        // 全选功能
        selectAll()
        // 单选功能
        selectOne()
        // 数量加减功能
        addAndReduce()
        // 删除商品功能
        remove()
        // 删除已选中的商品
        removeSelected()
        // 清空购物车
        clearCart()
        // 价格和数量的统计
        count()
    }
})

// 价格和数量的统计
function count(){
    // 计算小计
    $('.car_body_price span').each((i, v) => {
        var price = +$(v).text()
        var num = +$(v).parent().next().find('.goodsNumber').val()
        var subtotal = price * num
        // console.log($(v).parent().next().next());
        $(v).parent().next().next().find('span').text(subtotal)
    })

    // 计算已选中的所有商品的数量和总价
    var totalNum = 0
    var totalPrice = 0
    $('.checkOne:checked').each((i, v) => {
        var num = +$(v).parent().siblings('.car_body_num').find('.goodsNumber').val()
        totalNum += num

        totalPrice += +$(v).parent().siblings('.car_body_sum').find('span').text()
    })
    console.log(totalPrice);
    $('.numSum').text(totalNum)
    $('.priceSum span').text(totalPrice)
}

// 清空购物车
function clearCart(){
    $('.clearBoth').click(function(){
        layer.confirm('你真的要清空吗？', {
            btn: ['确定', '取消']
        }, function(){
            // 删除所有商品
            $('.car_body_list').remove()
            // 发送请求清空购物车
            $.ajax({
                url: 'http://localhost:8888/cart/clear?id='+getCookie('userId'),
                headers: {
                    authorization: localStorage.getItem('token') || ''
                }
            }).then(res => {
                // console.log(res);
                if(res.code === 1){
                    // 给购物车页面放一个没有商品的提示
                    showEmpty()
                    layer.msg('清空成功', {
                        icon: 1,
                        time: 1500
                    })
                }
            })
        }, function(){
            layer.msg('取消成功', {
                icon: 1,
                time: 1500
            })
        })
    })
}

// 购物车没有数据的展示
function showEmpty(){
    $('.content_c').html(`
        <div>
        <a href="list.html">
            <img src="https://img1.baidu.com/it/u=2396415280,2420254561&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=303" width="100%" />
        <a>
        </div>
    `)
}

// 删除已选中的商品
function removeSelected(){
    $('.removeSelect').click(function(){
        layer.confirm('你真的要删除吗？', {
            btn: ['确定', '取消']
        }, function(){
            // 将选中的商品从html结构中删除
            var input = $('.checkOne:checked').each((i, v) => {
                var p = $(v).parents().eq(3).remove()
                // console.log(p);
            })
            // console.log(input);
            count()
            // 发送请求
            $.ajax({
                url: 'http://localhost:8888/cart/remove/select?id='+getCookie('userId'),
                headers: {
                    authorization: localStorage.getItem('token') || ''
                }
            }).then(res => {
                // console.log(res);
                if(res.code === 1){
                    if(!$('.car_body_list').length){
                        showEmpty()
                    }
                    layer.msg('删除成功', {
                        icon: 1,
                        time: 1500
                    })
                }
            })
        }, function(){
            layer.msg('取消成功', {
                icon: 1,
                time: 1500
            })
        })
    })
}

// 删除商品功能
function remove(){
    $('.del').click(function(){
        layer.confirm('你确定要删除吗？', {
            btn: ['确定', '取消']
        }, () => {
            // 删除
            // console.log(this);
            $(this).parents().eq(4).remove()
            // console.log(p);
            count()
            // 发送请求删除
            var goodsId = $(this).attr('data-id')
            $.ajax({
                headers: {
                    authorization: localStorage.getItem('token') || ''
                },
                url: 'http://localhost:8888/cart/remove',
                data: {
                    id: getCookie('userId'),
                    goodsId
                }
            }).then(res => {
                // console.log(res);
                if(res.code === 1){
                    if(!$('.car_body_list').length){
                        showEmpty()
                    }
                    layer.msg('删除成功', {
                        icon: 1,
                        time: 1500
                    })
                }
            })
            
        }, function(){
            // 提示取消成功
            layer.msg('取消成功', {
                icon: 1,
                time: 1500
            })
        })
    })
}

// 数量加减功能
function addAndReduce(){
    // 加
    $('.add').click(function(){
        var num = +$(this).prev().val()
        num++
        if(num > $(this).parent().attr('data-stock')){
            return false
        }
        $(this).prev().val(num)
        count()
        // 发送请求
        var goodsId = $(this).parent().attr('data-id')
        $.ajax({
            url: 'http://localhost:8888/cart/number',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                goodsId,
                number: num
            }
        }).then(res => {
            // console.log(res);
        })
    })

    // 减
    $('.reduce').click(function(){
        var num = +$(this).next().val()
        num--
        if(num < 1){
            return false
        }
        $(this).next().val(num)
        count()
        // 发送请求
        var goodsId = $(this).parent().attr('data-id')
        $.ajax({
            url: 'http://localhost:8888/cart/number',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                goodsId,
                number: num
            }
        }).then(res => {
            // console.log(res);
        })
    })

    // 手动修改数字
    $('.goodsNumber').on('input', function(){
        var num = +$(this).val()
        if(num > $(this).parent().attr('data-stock')){
            num = $(this).parent().attr('data-stock')
        }
        if(num < 1){
            num = 1
        }
        $(this).val(num)
    })


    $('.goodsNumber').on('blur', function(){
        var num = $(this).val()
        var goodsId = $(this).parent().attr('data-id')
        count()
        $.ajax({
            url: 'http://localhost:8888/cart/number',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                goodsId,
                number: num
            }
        }).then(res => {
            console.log(res);
        })

    })
}

// 单选功能
function selectOne(){
    // 给所有的单选绑定单击事件
    $('.checkOne').click(function(){
        // 判断是否全部选中
        var arr = [].slice.call($('.checkOne'))
        var bool = arr.every(item => item.checked)
        $('.checkAll').prop('checked', bool)
        count()
        // 发送请求修改状态
        // 获取当前商品的id
        var goodsId = $(this).parent().attr('data-id')
        $.ajax({
            url: 'http://localhost:8888/cart/select',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                goodsId
            }
        }).then(res => {
            // console.log(res);
        })
    })
}

// 全选功能函数
function selectAll(){
    // 给两个全选复选框绑定单击事件
    $('.checkAll').click(function(){
        // 选中所有单选
        $('.checkOne').prop('checked', $(this).prop('checked'))
        // 设置所有全选
        $('.checkAll').prop('checked', $(this).prop('checked'))
        count()
        // 发送请求修改全部商品的选中状态
        $.ajax({
            url: 'http://localhost:8888/cart/select/all',
            method: 'post',
            headers: {
                authorization: localStorage.getItem('token') || ''
            },
            data: {
                id: getCookie('userId'),
                type: $(this).prop('checked') ? 1 : 0
            }
        }).then(res => {
            // console.log(res);
        })
    })
}